<template>
	<div class="container">
		<div class="tabs-box">
			<van-tabs
				:ellipsis="false"
				class="tabs-all"
				line-width="27px"
				line-height="2px"
				v-model="activeType"
				color="#8E9098"
				background="#020B1E"
				title-active-color="#fff"
				@click="handleClickTab">
				<van-tab v-for="(item, index) in imgType" :title="item.type_name" :name="item.type_value" :key="index"></van-tab>
			</van-tabs>
		</div>
		<div class="info-box">
			<div class="title-part"
				:class="currentData.score >= 80 ? 'high' : (currentData.score < 60 ? 'low' : 'medium')"
			>
				<img 
					:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + (currentData.score >= 80 ? 'high' : (currentData.score < 60 ? 'low' : 'medium')) + '_img.png'"
				>
				<span>{{currentData.type_name}}</span>
				<span v-if="currentData.score">：{{currentData.score}}分</span>
			</div>
			<div class="main-box">
				<div class="image-part">
					<div class="small-imgs">
						<div v-if="currentData.type_value == 5">
							<img @click="previewImg(currentData.img_path, index)" :src="item" v-for="(item, index) in currentData.img_path" :key="index">
						</div>
						<div v-else>
							<img @click="previewImg([currentData.img_path], 0)" :src="currentData.img_path">
						</div>
					</div>
					<img 
						:class="'face-img' + currentData.type_value"
						:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_img.png'"
					>
					<div v-if="currentData.type_value == 3" class="dark_circle">
						<div v-for="(item, index) in currentData.coordinate.rectangularAreas" :key="index" class="block" :class="item.position">
							{{item.classificationDesc}}<span v-if="item.levelDesc != '无'">,{{item.levelDesc}}</span>
						</div>
					</div>
					<div v-else-if="currentData.type_value == 4" class="skin_type">
						<div v-for="(item, index) in currentData.coordinate.rectangularAreas" :key="index" class="block" :class="item.position">
							<span v-if="item.classification == 'oily'">油性肤质</span>
							<span v-if="item.classification == 'neutral'">中性肤质</span>
							<span v-if="item.classification == 'dry'">干性肤质</span>
						</div>
					</div>
					<div v-else-if="currentData.type_value == 5" class="wrinkle">
						<div v-for="(item, index) in currentData.coordinate.rectangularAreas" :key="index" class="block" :class="item.position">
							{{item.name}},{{item.level_name}}
						</div>
					</div>
					<div v-else :class="currentData.type_alias">
						<div class="block">
							{{currentData.degree}}
						</div>
					</div>
				</div>
				<div class="intro-part">
					<div class="part1" v-if="currentData.type_value != 4 && currentData.type_value != 3 && currentData.type_value != 5">
						<img 
							class="icon-img"
							:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_icon.png'"
						>
						<div class="count">
							<template v-if="currentData.type_value == 8">
								<div class="t1" >{{currentData.type_name}}面占比</div>
								<div class="t2">{{currentData.area}}</div>
							</template>
							<template v-else>
								<div class="t1" >{{currentData.type_name}}个数</div>
								<div class="t2">{{currentData.num}}</div>
							</template>
						</div>
						<div class="right" v-if="currentData.degree_value != '0'">
							<img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/progress.png" class="progress">
							<div :class="'circle circle-'+currentData.degree_value"></div>
						</div>
					</div>
					<div class="part2">
						<template v-if="currentData.causes">
							<div class="title">产生原因</div>
							<div class="text">{{currentData.causes}}</div>
						</template>
						<div class="title">护理建议</div>
						<div v-if="currentData.type_value == 3">
							<div v-for="(item, index) in currentData.coordinate.rectangularAreas" :key="index" >
								<div class="skin-title">
									<img 
										class="icon"
										:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_icon.png'"
									>
									<span class="classify">{{item.classificationDesc}}</span>						
									<span class="decro" v-if="item.levelDesc != '无'">{{item.levelDesc}}</span>
								</div>
								<div class="text">{{item.advise}}</div>
							</div>
						</div>
						<div v-else-if="currentData.type_value == 4">
							<template v-if="currentData.oilyAdvise">
								<div class="skin-title">
									<img 
										class="icon"
										:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_icon.png'"
									>
									<span class="classify">油性肤质</span>
								</div>
								<div class="text">{{currentData.oilyAdvise}}</div>
							</template>
							<template v-if="currentData.neutralAdvise">
								<div class="skin-title">
									<img 
										class="icon"
										:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_icon.png'"
									>
									<span class="classify">中性肤质</span>
								</div>
								<div class="text">{{currentData.neutralAdvise}}</div>
							</template>
							<template v-if="currentData.dryAdvise">
								<div class="skin-title">
									<img 
										class="icon"
										:src="'https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/ai/' + currentData.type_alias + '_icon.png'"
									>
									<span class="classify">干性肤质</span>
								</div>
								<div class="text">{{currentData.dryAdvise}}</div>
							</template>
						</div>
						<div class="text" v-else>{{currentData.advise}}</div>
					</div>
				</div>
			</div>
		</div>
		<ai-goods v-if="goodsData.length > 0" :goodsData="goodsData" :detection_item_id="detection_item_id"></ai-goods>
	</div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { Tab, Tabs, ImagePreview } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(ImagePreview)

import { Toast } from 'vant'
Vue.use(Toast)

import { skinDetail } from '@/api/dz/aiDzApi'
import aiGoods from './components/aiGoods/index'

export default {
	components: {
		aiGoods
	},
	data() {
		return {
			activeType: 1,
			imgType: [
				{
					type_name: '黑头',
					type_value: '1',
					type_alias: 'black_head',
				},
				{
					type_name: '痘痘',
					type_value: '2',
					type_alias: 'dou_dou',

				},
				{
					type_name: '黑眼圈',
					type_value: '3',
					type_alias: 'dark_circle',
				},					
				{
					type_name: '肤质',
					type_value: '4',
					type_alias: 'skin_type',
				},					
				{
					type_name: '皱纹',
					type_value: '5',
					type_alias: 'wrinkle'
				},
				{
					type_name: '毛孔',
					type_value: '7',
					type_alias: 'pore',
				},
				{
					type_name: '色斑',
					type_value: '8',
					type_alias: 'spots_contours',
				},		
			],
			resultType: [
				{
					type_name: '黑头',
					type_value: '1',
					type_alias: 'black_head',
					degree_value: '1',
					degree: '轻度',
					score: '89',
					num:3,
					causes: 'causes',
					advise: '',
				},
				{
					type_name: '痘痘',
					type_value: '2',
					type_alias: 'dou_dou',
					degree_value: '0',
					degree: '无',
					score: '89',
					num:3,
					causes: 'causes',
					advise: '',
				},
				{
					type_name: '黑眼圈',
					type_value: '3',
					type_alias: 'dark_circle',
					score: '89',
					causes: '',
					advise: '',
					"coordinate": {
						"rectangularAreas": [
							{
									"classification": "none",
									"level": "none",
									"position": "left",
									"rectangularPoint": {
											"x1": 224.0,
											"y1": 277.0,
											"x2": 313.0,
											"y2": 332.0
									},
									"classificationDesc": "无",
									"levelDesc": "无",
									"advise": "你的双眸明亮动人，没有黑眼圈的困扰哦。"
							},
							{
									"classification": "none",
									"level": "none",
									"position": "right",
									"rectangularPoint": {
											"x1": 362.0,
											"y1": 258.0,
											"x2": 442.0,
											"y2": 332.0
									},
									"classificationDesc": "无",
									"levelDesc": "无",
									"advise": "你的双眸明亮动人，没有黑眼圈的困扰哦。"
							}
						]
					}
				},
				{
					type_name: '肤质',
					type_value: '4',
					type_alias: 'skin_type',
					"coordinate": {
						"rectangularAreas": [
								{
										"classification": "oily",
										"position": "forehead",
										"degree": 38.5,
										"rectangularPoint": {
												"x1": 211.0,
												"y1": 114.0,
												"x2": 444.0,
												"y2": 207.0
										}
								},
								{
										"classification": "oily",
										"position": "nose",
										"degree": 99.9,
										"rectangularPoint": {
												"x1": 304.0,
												"y1": 289.0,
												"x2": 394.0,
												"y2": 393.0
										}
								},
								{
										"classification": "oily",
										"position": "left",
										"degree": 45.0,
										"rectangularPoint": {
												"x1": 150.0,
												"y1": 321.0,
												"x2": 304.0,
												"y2": 463.0
										}
								},
								{
										"classification": "neutral",
										"position": "right",
										"degree": 92.4,
										"rectangularPoint": {
												"x1": 394.0,
												"y1": 281.0,
												"x2": 502.0,
												"y2": 425.0
										}
								},
								{
										"classification": "oily",
										"position": "chin",
										"degree": 80.3,
										"rectangularPoint": {
												"x1": 255.0,
												"y1": 475.0,
												"x2": 449.0,
												"y2": 553.0
										}
								}
						]
					},
					oilyAdvise: '',
					neutralAdvise: '',
					dryAdvise: ''
				},
				{
					type_name: '粗大毛孔',
					type_value: '7',
					type_alias: 'pore',
					degree_value: '1',
					degree: '轻度',
					score: '89',
					num:3,
					causes: '',
					advise: '',
				},
				{
					type_name: '色斑',
					type_value: '8',
					type_alias: 'spots_contours',
					degree_value: '1',
					degree: '轻度',
					score: '89',
					area: '1.89%',
					causes: '',
					advise: '',
				}
			],
			currentData: {
				type_name: '皱纹',
				type_value: '5',
				type_alias: 'wrinkle',
				degree_value: '',
				degree: '',
				score: '89',
				causes: '',
				advise: '',
				"coordinate": {
					"rectangularAreas": [
						{
								"classification": "none",
								"level": "none",
								"position": "left",
								"rectangularPoint": {
										"x1": 224.0,
										"y1": 277.0,
										"x2": 313.0,
										"y2": 332.0
								},
								"classificationDesc": "无",
								"levelDesc": "无",
								"advise": "你的双眸明亮动人，没有黑眼圈的困扰哦。"
						},
						{
								"classification": "none",
								"level": "none",
								"position": "right",
								"rectangularPoint": {
										"x1": 362.0,
										"y1": 258.0,
										"x2": 442.0,
										"y2": 332.0
								},
								"classificationDesc": "无",
								"levelDesc": "无",
								"advise": "你的双眸明亮动人，没有黑眼圈的困扰哦。"
						}
					]
        },
			},
			detection_item_id: '',
			goodsData: []
		}
	},
	created () {
		this.id = this.$route.query.skin_id
		this.activeType = 1
		this.getDetailData()
		},
	methods: {
		// TODO 增加图片预览
		previewImg(imgArr, index) {
			var imgUrl = imgArr[index]; //获取当前点击的图片
			wx.previewImage({
				current: imgUrl, //当前图片地址
				urls: imgArr,  //所有要预览的图片的地址集合数组形式
			})
		},
		
		Jump(url, data) {
			this.$JumpPath(this, url, data, 0)
		},
		handleClickTab(type_value) {
			// console.log('type_value', type_value)
			this.activeType = type_value
			this.getDetailData()
		},
		getDetailData() {
			this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
			skinDetail({
				id: this.id,
				type: this.activeType
			}).then(res => {
        this.$loadingWrap.close()
				if (res.status == 1) {
					let resData = res.data.detection
					
					let obj = this.imgType.find(item => 
						item.type_value == this.activeType
					)

					let t = resData
					let currentData = Object.assign(t, obj)
					this.currentData = currentData
					this.goodsData = res.data.item
					this.detection_item_id = res.data.detection_item_id
				}		
			})
		}
		
	}
}
</script>
<style lang="scss">
.app-wrapper.h100 {
	background: #020B1E;
	padding: 0;
}
.container {
	width: 100vw;
	min-height: 100vh;
	background: #020B1E;
	.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
		display: none;
	}
	.tabs-box {
		.van-tabs--line .van-tabs__wrap{
			height: 88px;
		}
      .van-tab {
        font-size: 30px;
        line-height: 88px;
				margin: 0 15px;
      }
      .van-tab--active {
				font-weight: 500;
				border-bottom: 4px solid rgb(142, 144, 152);
      }
      .van-tabs__line {
				display: none;
      }
	}
	.info-box {
		margin-top: 40px;
		padding: 0 32px;
		position: relative;
		.title-part {
			width: 300px;
			height: 64px;
			background: rgba(1,113,164,1);
			border-radius: 8px;
			left: 50%;
			transform: translateX(-50%);
			line-height: 64px;
			text-align: center;
			font-size: 32px;
			font-weight: 500;
			color: #fff;
			position: absolute;
			top: -32px;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
			&.low {
				background: #DE4252;
			}
			&.medium {
				background: #F5893E;
			}
			img {
				width: 35px;
				height: 35px;
				margin-right: 16px;
			}
		}
		.main-box {
			width: 100%;
			border-radius: 24px 24px 0 0 ;
			overflow: hidden;
			padding-bottom: 35px;
			.image-part {
				height: 510px;
				background: #2D3140;
				position: relative;
				.small-imgs {
					position: absolute;
					bottom: 45px;
					left: 470px;
					img {
						width: 85px;
						height: 85px;
						border-radius: 50%;
						margin-right: 15px;
						border: 1px solid #fff;
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.block {
					position: absolute;
					height: 56px;
					line-height: 54px;
					text-align: center;
					background: rgba(72,94,120,1);
					border: 2px solid rgba(76,196,252,1);
					border-radius: 28px;
					color: #fff;
					font-size: 24px;
				}
				.black_head {
					.block {
						width: 112px;
						left: 56px;
						top: 265px;
					}
				}
				.dou_dou {
					.block {
						width: 112px;
						left: 48px;
						top: 140px;
					}
				}
				.dark_circle {
					.block {
						width: 152px;
						&.left {
							left: 2px;
							top: 245px;
						}						
						&.right {
							right: 2px;
							top: 245px;
						}
					}

				}
				.skin_type {
					.block {
						width: 128px;
						&.forehead {
							left: 40px;
							top: 137px;
						}
						&.nose {
							right: 29px;
							top: 217px;
						}
						&.left {
							left: 29px;
							top: 273px;
						}						
						&.right {
							right: 29px;
							top: 298px;
						}
						&.chin {
							left: 67px;
							top: 371px;
						}								
					}
				}
				.wrinkle {
					.block {
						width: 172px;
						&.left {
							left: 21px;
							top: 293px;
						}						
						&.right {
							right: 20px;
							top: 244px;
						}
						&.top {
							left: 2px;
							top: 142px;
						}	
					}
				}
				.pore {
					.block {
						width: 112px;
						left: 33px;
						top: 265px;
					}
				}
				.spots_contours {
					.block {
						width: 112px;
						left: 56px;
						top: 148px;
					}
				}
				.face-img1 {
					width: 311px;
					height: 377px;
					left: 168px;
					top: 84px;
					position: absolute;
				}
				.face-img2 {
					width: 318px;
					height: 377px;
					left: 160px;
					top: 84px;
					position: absolute;
				}
				.face-img3 {
					width: 376px;
					height: 377px;
					left: 154px;
					top: 84px;
					position: absolute;
				}
				.face-img4 {
					width: 372px;
					height: 377px;
					left: 157px;
					top: 84px;
					position: absolute;
				}
				.face-img5 {
					width: 319px;
					height: 377px;
					left: 172px;
					top: 84px;
					position: absolute;
				}
				.face-img7 {
					width: 334px;
					height: 377px;
					left: 145px;
					top: 84px;
					position: absolute;
				}
				.face-img8 {
					width: 311px;
					height: 377px;
					left: 168px;
					top: 84px;
					position: absolute;
				}
				
			}
			.intro-part {
				border-radius: 0 0 24px 24px;
				background: #1F2331;
				padding: 10px 30px;
				font-size: 24px;
				line-height: 48px;
				color: #D2D2D2;
				.part1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 36px 0;
					.icon-img {
						width: 100px;
						height: 100px;
						border-radius: 50%;
						margin-right: 16px;
						flex-shrink: 0;
					}
					.count {
						text-align: left;
						font-size: 28px;
						flex: 1;
						.t1 {
							color: #8E9098;
						}
						.t2 {
							font-weight: 500;
						}
					}
					.right {
						flex-shrink: 0;
						position: relative;
						width: 351px;
						height: 82px;
						img {
							width: 100%;
							height: 100%;
						}
						.circle {
							position: absolute;
							width: 32px;
							height: 32px;
							border-radius: 50%;
							border: 2px solid rgba(255,255,255,1);
							bottom: 2px;
							&.circle-1 {
								left: 64px;
							}
							&.circle-2 {
								left: 162px;
							}
							&.circle-3 {
								left: 252px;
							}
						}
					}
				}
				.part2 {
					padding: 0 4px;
					.title {
						color: #fff;
						font-size: 32px;
						line-height: 32px;
						padding: 30px 0;
						padding-left: 24px;
						position: relative;
						&::before {
							content: " ";
							width: 2px;
							height: 44px;
							background: #fff;
							position: absolute;
							left: 0;
							top: 25px;
						}
					}
					.text {
						padding-bottom: 28px;
						white-space: pre-line;
					}
					.skin-title {
						font-size: 30px;
						line-height: 30px;
						padding: 30px 0;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.icon {
							width: 60px;
							height: 60px;
							border-radius: 50%;
							margin-right: 16px;
						}
						.decro {
							display: inline-block;
							width: 80px;
							height: 40px;
							line-height: 38px;
							text-align: center;
							border-radius: 0 25px 25px 0;
							background: #dd7221;
							margin-left: 20px;
							font-size: 24px;
							line-height: 40px;
						}
					}
				}

			}
		}
	}
}

</style>
